
import context from './context'

// 类似于vue的 依赖注入 父 provider +  子孙 inject
function Sun() {
  return (
    <context.Consumer>
      {value => (
        <div>我是孙组件，直接使用爷爷组件提供的数据---{value}</div>
      )}
    </context.Consumer>
  )
}

function Header() {
  return (
    <context.Consumer>
      {item => (
        <>
          <h3>我是子组件，或者所有的后代组件都可以--- {item}</h3>
          <Sun />
        </>
      )}
    </context.Consumer>
  )
}

function App() {
  return (
    <context.Provider value="111">
      <Header />
    </context.Provider>
  )
}

export default App